<script setup>
import { ref } from "vue";

const tabs = [{id: 1, name: '京东秒杀'}, {id: 2, name: '每日特价'}, {id: 3, name: '品类秒杀'}]

const activeIndex = ref(0)
</script>

<template>
  <ul>
    <li v-for="item, index in tabs" :key="item.id">
      <a @click="activeIndex = index" href="#" :class="{active: activeIndex === index}">{{ item.name }}</a>
    </li>
  </ul>
</template>

<style >
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    display: flex;
    list-style: none;
    border-bottom: 2px solid #e01222;
    padding: 0 10px;
  }
  ul li {
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  ul li a {
    display: block;
    text-decoration: none;
    color:#333 ;
    font-weight: bold;
  }

  ul li a.active {
    background: #e01222;
    color: #fff;
  }

</style>
